<template lang="pug">
.components-container
  split-pane(split='vertical' @resize='resize'
    :default-percent='40'
    :min-percent='30'
    :max-percent='30')
    template(slot='paneL')
      .left-container
        video-player
    template(slot='paneR')
      split-pane(split='horizontal')
        template(slot='paneL')
          .top-container
        template(slot='paneR')
          .bottom-container
</template>

<script>
import splitPane from 'vue-splitpane'
import VideoPlayer from '@/components/Player/VideoPlayer'

export default {
  name: 'SplitpaneDemo',
  components: { splitPane, VideoPlayer },
  methods: {
    resize() {
      console.log('resize')
    }
  }
}
</script>

<style lang="scss" scoped>
.components-container {
  position: relative;
  height: 100vh;

  .ename {
    // background: #eef1f6;
    padding: 8px 24px;
    margin-bottom: 20px;
    border-radius: 2px;
    display: block;
    line-height: 32px;
    font-size: 16px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
      Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    color: #2c3e50;
    -webkit-font-smoothing: antialiased;
  }
}

.left-container {
  /* background-color: #f38181; */
  height: 100%;
}

.right-container {
  background-color: #fce38a;
  height: 200px;
}

.top-container {
  background-color: #fce38a;
  width: 100%;
  height: 100%;
}

.bottom-container {
  width: 100%;
  background-color: #95e1d3;
  height: 100%;
}
</style>
